<!--
@description    绩效评分记录
@author         秦俊强
@email          458112865@qq.com
@create         2020-01-21 17:30
-->


<!-- html start -->
<template>
  <div class="ant-card ant-card-body">

    <!-- 查询区 start -->
    <div class="menu-box">
      <a-row :gutter="10">
        <a-col :md="24" :sm="24">
          <div class="query-date">
            <span>考核期：</span>
            <a-select v-if="!yearMonthList.loading"
                      :value="yearMonthList.val.text" @change="changeDate">
              <a-select-option v-for="date in yearMonthList.arr"
                               :key="date.value">{{ date.text }}</a-select-option>
            </a-select>
            <a-select v-else :defaultValue="'数据加载中'" disabled></a-select>
          </div>

          <div class="query-type">
            <span>部门类别：</span>
            <a-select :value="departInfo.arr[departInfo.index].text"
                      @change="typeChange">
              <a-select-option v-for="depart in departInfo.arr"
                               :key="depart.value">{{ depart.text }}</a-select-option>
            </a-select>
          </div>

          <div class="query-depart">
            <span>考核部门：</span>
            <a-select v-if="!departInfo.arr[departInfo.index].value"
                      :value="'全部部门'"
                      :notFoundContent="'请选择「部门类别」'"></a-select>

            <a-select v-else :value="departInfo.arr[departInfo.index]['children'][departInfo.chIndex].text"
                      @change="departChange">
              <a-select-option v-for="depart in departInfo.arr[departInfo.index]['children']"
                               :key="depart.value">{{ depart.text }}</a-select-option>
            </a-select>
          </div>

         <!-- <div class="btn-box">
            <a-button :type="'primary'" icon="search"
                      @click="searchQuery">搜索</a-button>
          </div>-->
        </a-col>

      </a-row>
    </div>
    <!-- 查询区 end -->


    <!-- 内容区 start -->
    <div class="table-box">
      <!-- 表格数据 start -->
      <div class="table-box">
        <a-table :loading="loading"
                 :scroll="tableData.scroll"
                 :columns="tableData.columns"
                 :dataSource="tableData.dataSource"
                 :pagination="false"></a-table>
      </div>
      <!-- 表格数据 end -->

      <!-- 分页器 start -->
      <div class="pagination-box">
        <a-pagination :current="queryParam.pageNo"
                      :pageSize="queryParam.pageSize"
                      :total="queryParam.total"
                      :pageSizeOptions="['10', '20', '30', '40']"
                      @change="changePage"
                      showSizeChanger
                      @showSizeChange="onShowSizeChange"  />
      </div>
      <!-- 分页器 end -->
    </div>
    <!-- 内容区 end -->
  </div>
</template>
<!-- html end -->



<!-- js start -->
<script>

  /**
   * api 接口
   *
   * getYearMonthList => 获取评分年月信息
   * getIndexGroupOrgs => 获取部门类别与部门
   * getScoreDatagrid => 获取绩效评分记录
   * */
  import { getYearMonthList, getIndexGroupOrgs, getScoreDatagrid } from '@/api/api.js';

  /* 封装通用 api 服务 */
  import { apiService } from '@/api/api.service.js';

  /* 引入表格配置文件 */
  import { tableConfig } from './configs/KpiScore.config.js';



  export default {
    data() {
      return {
        queryParam: {
          pageNo: 1,
          pageSize: 10,
          total: 1
        },

        /* 年月下拉菜单 */
        yearMonthList: {
          loading: false,
          arr: [],    // 可选择的年月列表
          val: {}     // 已选年月，默认数组第 0 个
        },

        /* 部门信息 */
        departInfo: {
          arr: [{ text: '全部类型', value: '' }],
          index: 0,
          chIndex: 0
        },

        tableData: tableConfig,
        loading: false
      }
    },

    created() {
      /* 获取评分年月 */
      this.yearMonthList.loading = true;
      apiService(getYearMonthList()).then((res) => {
        let list = res.result || [];
        this.yearMonthList = {
          loading: false,
          arr: list,
          val: list[0]
        };

        this.getIndexGroupOrgs();
      }).catch((error) => {
        this.yearMonthList.loading = false;
        this.$message.error(error.message);
      });
    },

    methods: {

      /* 监听考核期变化 */
      changeDate(code) {
        let arr = this.yearMonthList.arr;
        this.yearMonthList.val = arr.find((item) => { return (item.value === code); });
        this.searchQuery();
      },

      /* 一级下拉改变 */
      typeChange(value) {
        let arr = this.departInfo.arr;
        this.departInfo.index = arr.findIndex((item) => { return item.value === value });
        this.searchQuery();
      },

      /* 二级下拉改变 */
      departChange(value) {
        let departInfo = this.departInfo;
        let arr = departInfo.arr;
        let index = departInfo.index;
        this.departInfo.chIndex = arr[index]['children'].findIndex((item) => { return item.value === value });
        this.searchQuery();
      },

      /* 监听分页条数的改变 */
      onShowSizeChange(current, pageSize) {
        this.queryParam.pageSize = pageSize;

        if (this.tableData.dataSource.length > 0) {
          this.queryParam.pageNo = 1;
          this.searchQuery();
        }
      },

      /* 监听页码改变 */
      changePage(pageNo) {
        this.queryParam.pageNo = pageNo;
        this.searchQuery();
      },

      /* 查询 */
      searchQuery() {
        let t = this;

        let queryParam = t.queryParam;
        let departInfo = t.departInfo;
        let yearMonth = this.yearMonthList.val.value;
        let departVal = departInfo.arr[departInfo.index].value || null;
        let children = departInfo.arr[departInfo.index]['children'];
        let param = {
          pageNo: queryParam.pageNo,
          pageSize: queryParam.pageSize,
          indexYearMonth: yearMonth,        // 考核期
          indexGroup: departVal,            // 部门类别
          indexDepart: departVal ? (children[departInfo.chIndex].value || null) : null    // 部门编码
        }

        t.loading = true;
        apiService(getScoreDatagrid(param)).then((res) => {
          t.loading = false;
          let resData = res.result;

          if (!resData || (resData && resData.records && resData.records.length === 0)) {
            t.tableData.dataSource = [];
            t.queryParam.pageNo = 1;
            t.queryParam.total = 1;
            return;
          }

          t.tableData.dataSource = resData.records;         // 更新列表
          t.queryParam.pageNo = resData.current;            // 更新页数
          t.queryParam.total = resData.total;          // 总页数
        }).catch((error) => {
          t.loading = false;
          this.$message.error(error.message);
        });
      },

      /* 获取部门下拉菜单 */
      getIndexGroupOrgs() {
        apiService(getIndexGroupOrgs()).then((res) => {
          let resData = res.result;

          for (let i = 0; i < resData.length; i++) {
            let item = resData[i];
            let param = { text: item.text, value: item.value, children: item.orgs };

            param.children[0].text = '全部部门';
            param.children[0].value = '';

            this.departInfo.arr.push(param);
          }
        }).catch((error) => {
          this.$message.error(error.message);
        });

        this.searchQuery();
      }

    }
  }
</script>
<!-- js end -->



<!-- css start -->
<style lang="less" scoped>
  .menu-box {
    margin-bottom: 10px;

    [class*="query-"] {
      float: left;
      margin-right: 10px;
    }

    /deep/.ant-select {
      width: 120px;
    }

    .query-depart {
      /deep/.ant-select {
        width: 150px;
      }
    }
  }

  .table-box {
    /deep/.ant-table th,
    /deep/.ant-table td { white-space: nowrap; }

    .pagination-box {
      margin-top: 20px;
      float: right;
    }
  }
</style>
<!-- css end -->

